<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件的嵌套</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<!--
		VueComponent:
			1.school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的
			2.我们只需要写成<school></school>,Vue解析时会帮我们创建school组件的实例对象
			即Vue帮我们执行的:new VueComponent(options)
			3.特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!
			4.关于this指向:
				(1).组件配置中
					data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是[VueComponent实例对象]
				(2).new Vue(options)配置中:
					data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是[Vue实例对象]
			5.VueComponent的实例对象，以后简称vc(也可称之为：组件实例对象)
				Vue的实例对象，以后简称vm
		-->
		<div id="root">
		</div>
		<script>
			Vue.config.productionTip = false;
			const student = Vue.extend({
				template:`
				<div>
					<h3>学生姓名:{{name}}</h3>
					<h3>学生性别:{{sex}}</h3>
					<h3>学生年龄:{{age}}</h3>
				</div>
				`,
				data(){
					return {
						name:'张三',
						sex:'男',
						age:22
					};
				}
			});
			const school = Vue.extend({
				name:'xuexiao',
				template:`
				<div>
					<h3>学校名称:{{name}}</h3>
					<h3>学校地址:{{address}}</h3>
					<button @click="showName">点我提示学校名</button>
					<hr />
					<student></student>
				</div>
				`,
				data(){
					console.log('school',this)
					return {
						name:'星桥第一小学',
						address:'学成街'
					};
				},
				methods:{
					showName(){
						alert(this.name);
					}
				},
				components: {
					student
				},
			});
			
			const hello = Vue.extend({
				template:`
				<div>
					<h2>你好呀：{{name}}</h2>
				</div>
				`,
				data(){
					console.log('hello',this)
					return {name:'王五'};
				}
			});
			
			const app = Vue.extend({
				template:`
					<div>
						<hello></hello>
						<school></school>
					</div>
				`,
				components:{
					school,
					hello
				}
			});
			
			const vm = new Vue({
				el:'#root',
				data:{
					msg:'你好呀'
				},
				template:`<app></app>`,
				components:{
					// 局部注册
					app
				}
			});
		</script>
	</body>
</html>